<template>
  <el-card shadow="never">
    <el-button type="primary" size="small" @click="addDepBtn">确认</el-button>
    <el-form ref="searchForm" :inline="true" :model="searchInfo" class="demo-form-inline">
      <el-form-item prop="name" label="部门名">
        <el-input size="small" v-model="searchInfo.name" placeholder="请输入部门名" clearable></el-input>
      </el-form-item>
      <el-form-item prop="rid" label="部门角色">
        <el-select size="small" v-model="searchInfo.rid" filterable   placeholder="请选择部门角色" clearable>
          <el-option
            v-for="item in depRoleList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="resetSearch">
          <el-icon class="icon"><elementRefresh/></el-icon> 
          <span class="icon-font">刷新</span>
        </el-button>
        <el-button size="small" type="primary" @click="onSearch">
          <el-icon class="icon"><elementSearch/></el-icon> 
          <span class="icon-font">搜索</span>
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-table
    ref="multipleTable"
    :data="addBDList"
    stripe
    show-header
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
  <el-table-column type="selection"  />
  <el-table-column property="name" label="部门名" sortable align="center" showOverflowTooltip/>
  <el-table-column property="rname" label="部门类型" sortable align="center" showOverflowTooltip/>
  </el-table>
</template>

<script>
import { ref, reactive } from 'vue';
import service from '/@/utils/request';
import { ElMessage } from 'element-plus';
export default {
  name: 'AddBD',
  emits: ['getDeps'],
  setup(props, {emit}) {
    let selectDepList = ref([])
    let depRoleList =  ref([])
    let addBDList =  ref([])
    let searchForm =  ref([])
    const searchInfo =  reactive({
      name:'',
      rid:''
    })
        // ===================== axios ===============
    const getDepData = async () => { // 获取角色数据
      let dataInfo = await service.get('admin/role/getList', {params: {searchInfo:{type:'部门'}}}) // 获取数据
			if (dataInfo.code === 200) {
				depRoleList.value = dataInfo.data.data
      } else {
				ElMessage.error('获取角色列表信息失败')
      }
    }
		getDepData();
    const getBDData = async () => { // 获取部门类型数据
      let dataInfo = await service.get('admin/adep/getList', {params: {searchInfo:searchInfo}}) // 获取数据
			if (dataInfo.code === 200) { addBDList.value = dataInfo.data.data } 
			else {ElMessage.error('获取部门列表信息失败')}
    }
    getBDData()

    const handleSelectionChange = (val) => {
      selectDepList.value = val
    }
    const addDepBtn = () => {
      emit('getDeps',selectDepList.value)
    }
    const onSearch = () => { // 搜索
      getBDData()
    }

    const resetSearch = () => { // 刷新
      searchForm.value.resetFields()
      getBDData()
    }
    return {
      searchInfo,
      addBDList,
      depRoleList,
      selectDepList,
      searchForm,
      onSearch,
      resetSearch,
      addDepBtn,
      handleSelectionChange,
    }
  }

}
</script>

<style>

</style>